<template>
	<view class="uiwu-button">
		<!-- <view class="uiwu-button-num">编号：{{item.device_info?.device_code}}</view> -->
		<view class="uiwu-flex-space">
			<view class="operate">
				<!-- <zui-joystick :size="100" @direction="direction" @deactive="deactive" /> -->
				<view class="topbtn" :class="mydir == 'top'?'activebtn':''" @touchstart="direction('top')"
					@touchend="deactive">

				</view>
				<view class="rightbtn" :class="mydir == 'right'?'activebtn':''" @touchstart="direction('right')"
					@touchend="deactive">

				</view>
				<view class="downbtn" :class="mydir == 'bottom'?'activebtn':''" @touchstart="direction('bottom')"
					@touchend="deactive">

				</view>
				<view class="leftbtn" :class="mydir == 'left'?'activebtn':''" @touchstart="direction('left')"
					@touchend="deactive">

				</view>

				<!-- <image class="zhongImg" src="/static/zhua.png" mode=""></image> -->
				<view class="cover" v-if="loading">

				</view>
			</view>
			<view class="start" @tap="TapStart"></view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { socket } from '@/config/ws';
	const emits = defineEmits(['onStart', 'direction', 'deactive'])
	const props = defineProps({
		item: {
			default: {},
			type: Object
		},
		isExecute: {
			default: true,
			type: Boolean
		}
	})
	const mydir = ref('')
	let timer
	let loading = ref(false)
	const TapStart = () => {
		if (!props.isExecute) return
		let data = {
			type: 'deviceControl',
			token: uni.getStorageSync('token'),
			device_id: props.item.device_info.id,
			instruct: 'grab'
		}
		console.log(JSON.stringify(data));
		socket.send(JSON.stringify(data));
		console.log('执行抓取命令');
		emits('onStart')
	}
	const direction = (dir : string) => {
		mydir.value = dir
		if (!props.isExecute) return
		
		socket.send(JSON.stringify({
			type: 'deviceControl',
			token: uni.getStorageSync('token'),
			device_id: props.item.device_info.id,
			instruct: dir
		}));
		
		emits('direction', '');
	}
	const deactive = () => {
		// loading.value = true
		mydir.value = ''
		if (!props.isExecute) return
		socket.send(JSON.stringify({
			type: 'deviceControl',
			token: uni.getStorageSync('token'),
			device_id: props.item.device_info.id,
			instruct: 'stop'
		}));
		emits('deactive', '');

		// timer = setTimeout(() => {
		// 	loading.value = false
		// }, 200)

	}
</script>

<style lang="scss">
	.uiwu-button {
		padding: 0 63rpx 0 70rpx;

		.uiwu-button-num {
			font-size: 18rpx;
			font-weight: 500;
			color: #FCE5C7;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.operate {
			width: 240rpx;
			height: 240rpx;
			padding: 10rpx;
			position: relative;
			background-size: 100% 100%;

			.cover {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 10;
				left: 0;
				top: 0;
			}

			.zhongImg {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				top: 72rpx;
				left: 70rpx;
			}

			view {
				position: absolute;
				width: 98rpx;
				height: 98rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 14rpx;
				background-size: 100% 100%;
			}

			view.activebtn {
				opacity: 0.6;
			}

			.topbtn {
				top: -10rpx;
				left: 70rpx;
				right: 70rpx;
				background-image: url(/static/btn/shang.png); 
			}

			.rightbtn {
				right: -10rpx;
				top: 70rpx;
				bottom:70rpx;
				background-image: url(/static/btn/you.png);
			}

			.downbtn {
				bottom: -10rpx;
				left: 70rpx;
				right: 70rpx;
				background-image: url(/static/btn/xia.png);
			}

			.leftbtn {
				left: -10rpx;
				top: 70rpx;
				bottom:70rpx;
				background-image: url(/static/btn/zuo.png);
			}
		}

		.right {
			width: 180rpx;
			height: 211rpx;
			background: #F6AA00;
			border-radius: 24rpx;
			padding: 2rpx;

			.image {
				width: 100%;
				height: 176rpx;
				border-radius: 24rpx;
				background-color: #fff;

				image {
					width: 96rpx;
				}
			}

			text {
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 31rpx;
				margin-top: 2rpx;
			}
		}

		.start {
			width: 144rpx;
			height: 144rpx;
			background: url('../../static/zhua.png') no-repeat 0 0;
			background-size: 100% 100%;
			text-align: center;
			line-height: 90rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #FFFFFF;
			text-shadow: 0px 4rpx 0px #4C9F24;
		}
	}
</style>